<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				
			}
			.box{
				width: 800px;
				margin: 0 auto;
			}
			#tab{
				width: 500px;
				
			}
			#tab tr{
				height: 30px;
				background: greenyellow
			}
			#tab tr td{
				text-align: center;
			}
			#u1 li{
				list-style: none;
				float: left;
				width: 30px;
				height: 30px;
				background: deeppink;
				margin-left: 10px;
				text-align: center;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="main">
				<table border="0" cellspacing="" cellpadding="" id="tab">
					
				</table>
			</div>
			<ul id="u1">
				
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/jq3.js">
	
</script>
<script type="text/javascript">
	var now=1;//当前页面
	var num=4;//每页数据数
	var pages=0;//页数
	
	$.get("data1.json","",function(d){
		console.log(d)
		pages=Math.ceil(d.length/num)
		console.log(pages)
		rander(d,1)
		pagess()
			$("li").click(function(){
				var q=$(this).index()+1
//				console.log(q)
//				var z=d.slice(q*num,(q+1)*num)
				rander(d,q)
			})
	})
	function rander(msg,k){
		
		
		var a=msg.map(function(x,i){
		 	if(i>=(k-1)*num&&i<k*num){
		 		return `
				<tr>
						<td>${x.id}</td>
						<td>${x.name}</td>
						<td>${x.haiguan}</td>
						<td>${x.keshi}</td>
					</tr>
			`
			}
		}).join("")
		 	
			
		console.log(a)
		$("#tab").html("")
		$("#tab").append(a)
	}
	function pagess(){
		var aa=``;
		for(var i=0;i<pages;i++){
			aa+=`<li>`+(i+1)+`</li>`
		}
		$("#u1").append(aa)
	}
	
	
	
	
</script>